<template>
	<div class="container container-star container-bird">
		<div class="container-title">
			<div class="title">
				<div class="number">4</div>
				<div class="moon">
					<div class="face">
						<div class="mouth"></div>
						<div class="eyes">
							<div class="eye-left"></div>
							<div class="eye-right"></div>
						</div>
					</div>
				</div>
				<div class="number">4</div>
			</div>

			<div class="subtitle">{{ message }}</div>

			<div class="goback" @click="goBack">返回上一页</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 获取随机短语
const message = ref("每有一个404页面出现，就有一个程序员在挨打!");
const getMessage = () => {
	const messageList = ref([
		"每有一个404页面出现，就有一个程序员在挨打!",
		"曾经有个页面摆在你面前你没有珍惜，直到它404了……",
		"从前有座山，山里有座庙， 庙里有个页面，现在找不到…...",
		"程序员：哭了，这个月绩效又没了！",
		"千万别给其他程序员看到，不然我怕他们说我辣鸡！",
		"这只是我的素颜，待我补妆回来！",
		"生活不易，我也叹气，要不刷新一下再继续？",
		"如果我能够看到自己的内容，我想它一定充满忧伤，因为我把快乐都给了其他页面",
		"我生病了~正在诊断哦~乖乖等我!",
		"我还能在抢救一下…抢救一下…救一下…一下…下…",
		"你遇到的404，都是程序员当年加班熬夜不小心惹出来的事，再给他个机会吧！",
		"本想走到你心里，一不小心迷路了！",
		"404的笑像一条恶犬，撞乱我心弦",
		"404 大师兄，页面被妖怪抓走了……",
	]);

	let i = Math.floor(Math.random() * (messageList.value.length - 1 + 1));
	message.value = messageList.value[i];
};

// 返回上一级页面
const goBack = () => {
	router.go(-1);
};

onMounted(() => {
	getMessage();
});
</script>

<style scoped lang="scss">
.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.container-star {
	background-image: linear-gradient(to bottom, #292256 0%, #8446cf 70%, #a871d6 100%);
}
.container-title {
	width: 600px;
	height: 450px;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	color: white;
	line-height: 1;
	font-weight: 700;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	display: flex;
}

.title > * {
	display: inline-block;
	font-size: 200px;
}

.number {
	text-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
	padding: 0 0.2em;
	font-family: "Russo One", sans-serif;
}

.subtitle {
	font-size: 25px;
	margin-top: 1.5em;
	font-family: "Lato", sans-serif;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.moon {
	position: relative;
	border-radius: 50%;
	width: 160px;
	height: 160px;
	z-index: 2;
	background-color: #fff;
	box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #ff1177;
	-webkit-animation: rotate 5s ease-in-out infinite;
	animation: rotate 5s ease-in-out infinite;
}
.moon .face {
	top: 60%;
	left: 47%;
	position: absolute;
}
.moon .face .mouth {
	border-top-left-radius: 50%;
	border-bottom-right-radius: 50%;
	border-top-right-radius: 50%;
	background-color: #5c3191;
	width: 25px;
	height: 25px;
	position: absolute;
	-webkit-animation: snore 5s ease-in-out infinite;
	animation: snore 5s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: inset -4px -4px 4px rgba(0, 0, 0, 0.3);
}
.moon .face .eyes {
	position: absolute;
	top: -30px;
	left: -30px;
}
.moon .face .eyes .eye-left,
.moon .face .eyes .eye-right {
	border: 4px solid #5c3191;
	width: 30px;
	height: 15px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	border-top: 0;
	position: absolute;
}
.moon .face .eyes .eye-left:before,
.moon .face .eyes .eye-left:after,
.moon .face .eyes .eye-right:before,
.moon .face .eyes .eye-right:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	width: 4px;
	height: 4px;
	background-color: #5c3191;
	top: -2px;
	left: -4px;
}
.moon .face .eyes .eye-left:after,
.moon .face .eyes .eye-right:after {
	left: auto;
	right: -4px;
}
.moon .face .eyes .eye-right {
	left: 50px;
}

.goback {
	margin-top: 40px;
	font-size: 16px;
	cursor: pointer !important;
	color: #ccc;
}

@keyframes rotate {
	0%,
	100% {
		-webkit-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes snore {
	0%,
	100% {
		-webkit-transform: scale(1) rotate(30deg);
		transform: scale(1) rotate(30deg);
	}
	50% {
		-webkit-transform: scale(0.5) rotate(30deg);
		transform: scale(0.5) rotate(30deg);
		border-bottom-left-radius: 50%;
	}
}
</style>
